<template>
    <div class="card">
        <div class="card__img-box flex">
            <img :src="item.pic_url" alt="展示图片" class="card__img">
        </div>

        <p class="card__desc">
            {{ item.desc }}
        </p>

        <div class="card__user flex">

            <div class="card__user-info flex">
                <img :src="item.avatar_url" alt="用户头像" class="card__user-avatar">
                <span>{{ item.username }}</span>
            </div>

            <div class="card__user-like flex">
                <img :src="'/public/images/home/like.png'" alt="点赞小图标" class="card__user-icon">
                <span>{{ item.click_count }}</span>
            </div>
        </div>


    </div>
</template>

<script setup>
import { defineProps } from 'vue';
const props = defineProps({
    item:Object
})
</script>

<style lang="scss" scoped>


.card{
    width: pxToRem(150);
    background-color: #fff;
    &__img-box{
        width: 100%;
        height: pxToRem(200);
        line-height: pxToRem(200);
    }

    &__img{
        width: 100%;
        height: auto;
        max-height: pxToRem(200);
        object-fit: cover;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
    }

    &__desc{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: pxToRem(16);
        width: 100%;
        box-sizing: border-box;
        padding: 0 pxToRem(10);
    }

    &__user{
        width: 100%;
        box-sizing: border-box;
        padding: 0 pxToRem(10);
        justify-content: space-between;

        &-info{
            font-size: pxToRem(12);
        }

        &-avatar{
            width: pxToRem(20);
            aspect-ratio: 1/1;
            border-radius: 50%;
            object-fit: cover;
        }

        &-like{
            font-size: pxToRem(14);
        }

        &-icon{
            width: pxToRem(20);
            aspect-ratio: 1/1;
            border-radius: 50%;
            object-fit: cover;
        }
    }
}


</style>